import React, { useState } from 'react';

import { Layout, Tabs } from 'antd';

import CustomizeRecordTable from '../CustomizeRecordTable';
import styled from '@emotion/styled';
import { Content } from 'antd/lib/layout/layout';
import Sider from 'antd/lib/layout/Sider';
import ServiceForm from './ServiceForm';
import Widget from '../Widget';
import AgentService from '../../../public/widget';
import { useTranslation } from 'react-i18next';

const WidgetWrapper = styled(Content)`
	max-width: 1024px;
	height: 768px;
	background-color: #fafbfc;
`;

const ContainerLayout = styled(Layout)`
	justify-content: center;
	display: flex;
	flex-flow: nowrap;
	background: none;
`;

const FormWrapper = styled(Sider)`
	margin-left: 12px;
	min-width: 430px !important;
	flex: 0 0 430px !important;
	max-width: 430px !important;
	width: 430px;
	background: #ffffff;
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
	border-radius: 2px;
`;

const TabWrapper = styled(Tabs)`
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	.ant-tabs-nav-list {
		margin-left: 220px;
	}
	.ant-tabs-ink-bar {
		display: none;
	}
	.ant-tabs-nav {
		margin: 0;
		height: 60px;
	}
	.ant-tabs-nav::before {
		display: none;
		border: 0;
	}
	.ant-tabs-content-holder {
		padding-top: 12px;
	}
	.ant-tabs-tab:hover {
		color: #7a7b7d;
	}
`;

const HeaderMenuItem = (props: any) => {
	const [key, setKey] = useState<string>('1');
	const { t } = useTranslation();
	const onChange = (key: string) => {
		console.log(key);
		setKey(key);
		if (key === '1') {
			const { configure } = AgentService.Agent;
			configure.setCurrentTab('full');
		}
	};

	return (
		<TabWrapper
			style={{ width: '100%' }}
			defaultActiveKey="1"
			onChange={onChange}
			items={[
				{
					label: `${t('service')}`,
					key: '1',
					children: (
						<ContainerLayout>
							<WidgetWrapper>
								<Widget></Widget>
							</WidgetWrapper>
							<FormWrapper>
								<ServiceForm {...props} />
							</FormWrapper>
						</ContainerLayout>
					)
				},
				{
					label: t('service-record'),
					key: '2',
					children: <CustomizeRecordTable active={key === '2'}></CustomizeRecordTable>
				}
			]}
		/>
	);
};

export default HeaderMenuItem;
